<template>
    <div id="app" class="bg">
        <Head>会员中心</Head>
        <div class="topbg">
            <div class="title">你好</div>
            <div class="content">欢迎使用自由职业一体化平台</div>
            <div class="advertising">
                <img src="../../assets/freelance/images/me_05.png"/>
            </div>
        </div>
        <div class="mode clearfix">
            <router-link class="box info" to="/freelance/personalinfo">
                <div class="synopsis">登记信息接零活</div>
                <div class="name">登记信息</div>
            </router-link>
            <router-link class="box manage" to="/freelance/promanage">
                <div class="synopsis">发布项目等接单</div>
                <div class="name">项目管理</div>
            </router-link>
            <router-link class="box promote" to="/freelance/promote">
                <div class="synopsis">提高信息曝光量</div>
                <div class="name">我要推广</div>
            </router-link>
            <router-link class="box pug" to="/freelance/footprint">
                <div class="synopsis">我看过这些信息</div>
                <div class="name">我的足迹</div>
            </router-link>
        </div>
        <div class="foodbg">
            <img src="../../assets/freelance/images/mebg_03.png"/>
        </div>
        <Foodmenu></Foodmenu>
    </div>
</template>
<script>
import Foodmenu from '@/components/freelance/Foodmenu'
export default {
  components: {
    Foodmenu
  }
}
</script>

<style lang="scss" scoped>
.bg{
    width: 100vw;
    height: 100vh;
    // background-image: linear-gradient(to bottom, #f5fafe , #ffffff);
    .topbg{
        width: calc(100vw - 30px);
        height: 105px;
        margin-left: 30px;
        margin-top: 20px;
        padding-top: 11px;
        background: url('../../assets/freelance/images/me_03.png') right 0 no-repeat;
        background-size: 136px 105px;
        position: relative;
        .title{
            line-height: 1;
            font-weight: bold;
            font-size: 21px;
            color: #262626;
        }
        .content{
            line-height: 1;
            margin-top: 16px;
            font-size: 16px;
            color: #777777;
        }
        .advertising{
            position: absolute;
            top: 95px;
            left:-30px;
            img{
                width: 100vw;
            }
        }
    }
    .mode{
        margin-top: 80px;
        padding: 20px;
        .box{
            width: 160px;
            height: 80px;
            box-shadow: 0px 0px 13px rgba($color: #ccc, $alpha: 0.6);
            border-radius: 5px;
            padding-left: 13px;
            &.info{
                float: left;
                background: url('../../assets/freelance/images/me_11.png') 98px center no-repeat;
                background-size: 57px 36px;
            }
            &.manage{
                float: right;
                background: url('../../assets/freelance/images/me_08.png') 98px center no-repeat;
                background-size: 57px 44px;
            }
            &.promote{
                margin-top: 15px;
                float: left;
                background: url('../../assets/freelance/images/me_19.png') 98px center no-repeat;
                background-size: 57px 43px;
            }
            &.pug{
                margin-top: 15px;
                float: right;
                background: url('../../assets/freelance/images/me_16.png') 98px center no-repeat;
                background-size: 57px 52px;
            }
            .synopsis{
                margin-top: 22px;
                line-height: 1;
                font-size: 10px;
                color: #a1a5ae;
            }
            .name{
                margin-top: 9px;
                line-height: 1;
                font-size: 16px;
                color: #333333;
                font-weight: bold;
            }
        }
    }
    .foodbg{
        width: 100vw;
        position: fixed;
        bottom: 87px;
        display: flex;
        align-items: center;
        img{
            margin: 0 auto;
            width: 217px;
            height: 64px;
        }
    }
}
</style>
